<template>
  <div>
    <ElTag>{{ a }}</ElTag>
    <!-- v bind : {{  }} 单向绑定 -->
    <ElInputNumber v-model="a"></ElInputNumber>
    <!-- v model 双向绑定 -->
    <ElLink>{{ aa }}</ElLink>
    <ElDatePicker v-model="timeStartEnd" type="datetimerange"></ElDatePicker>
    <ElButton @click="init()">模拟请求载入信息</ElButton>
    <ElInputNumber v-model="b"></ElInputNumber>
    <ElTag>{{ b }}</ElTag>
    <ElInputNumber v-model="bb"></ElInputNumber>
    <ElTag>{{ bb }}</ElTag>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
export type LeaveBill = {
  timeStart: null | string | Date
  timeEnd: null | string | Date
  billCode: string
}
export default defineComponent({
  name: 'PractiseOne',
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      a: 12,
      b: 100,
      bb: 200,
      leaveBill: {
        timeStart: null,
        timeEnd: null,
        billCode: 'xxx'
      } as LeaveBill
      //   xx: null
    }
  },
  computed: {
    /* sampleC() {
          return this.sampleD + "--";
        }, */
    // aa() {
    //   return this.a + 100
    // }
    aa: {
      get() {
        return this.a + 100
      },
      //   设置值
      set(aavalue: number) {
        this.a = aavalue - 100
      }
    },
    timeStartEnd: {
      get() {
        if (this.leaveBill.timeStart && this.leaveBill.timeEnd) {
          return [this.leaveBill.timeStart, this.leaveBill.timeEnd]
        } else {
          return null
        }
      },
      set(xxvalue: Array<string> | null) {
        if (xxvalue) {
          this.leaveBill.timeStart = xxvalue[0]
          this.leaveBill.timeEnd = xxvalue[1]
        } else {
          this.leaveBill.timeStart = null
          this.leaveBill.timeEnd = null
        }
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    init() {
      this.leaveBill = {
        timeStart: '2023-02-04',
        timeEnd: '2023-02-07',
        billCode: 'xxx'
      }
    },
    showInner() {
      console.log('showing')
    },
    show() {
      this.$nextTick(this.showInner)
    }
  },
  watch: {
    // sampleP(n, o) {},
    b(n, o) {
      // console.log('xxxx')
      // console.log(n, o)
      // console.log(n === this.b)
      // this.bb = this.b
      this.bb = n + 100
    },
    bb(n, o) {
      // this.b = this.bb - 100
      this.b = n - 100
    }
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
